各位好!今天是鐵人賽的第9天，很高興鐵人賽即將邁入第10天，今天要說的是bootstrap 5裡的表格，bootstrap 5的表格，基本類別table是可以自由修飾類別或是以自定義的方式。所有表格樣式在 Bootstrap都不會繼承，所以表格的樣式都會是獨立的方式呈現。

基本表格呈現

基本4x3格的表格

|

<table class="table">
    <thead>
        <tr>
            <th scope="col">row\col</th>
            <th scope="col">col1</th>
            <th scope="col">col2</th>
            <th scope="col">col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">row1</th>
            <td>(c1,r1)</td>
            <td>(c2,r1)</td>
            <td>(c3,r1)</td>
        </tr>
        <tr>
            <th scope="row">row2</th>
            <td>(c1,r2)</td>
            <td>(c2,r2)</td>
            <td>(c3,r2)</td>
        </tr>
    </tbody>
</table>

什麼是thead和tbdy?

何謂colspan和rowspan?

rowspan使用範例

<table class="table">
    <thead>
        <tr>
            <th scope="col">row\col</th>
            <th scope="col">col1</th>
            <th scope="col">col2</th>
            <th scope="col">col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">row1</th>
            <td>(c1,r1)</td>
            <td>(c2,r1)</td>
            <td rowspan="2">(c3,r1+r2)</td>
        </tr>
        <tr>
            <th scope="row">row2</th>
            <td>(c1,r2)</td>
            <td>(c2,r2)</td>
        </tr>
    </tbody>
</table>

colspan使用範例

<table class="table">
    <thead>
        <tr>
            <th scope="col">row\col</th>
            <th scope="col">col1</th>
            <th scope="col">col2</th>
            <th scope="col">col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">row1</th>
            <td>(c1,r1)</td>
            <td>(c2,r1)</td>
            <td>(c3,r1)</td>
        </tr>
        <tr>
            <th scope="row">row2</th>
            <td>(c1,r2)</td>
            <td colspan="2">(c2+c3,r2)</td>
        </tr>
    </tbody>
</table>

關於table(一)的教學，今天的文章就先告一段落囉!接下來明天的table(二)，期待明天的到來，感謝各位大佬的閱讀，byebye~